<template>
    <div class="container">
        <div class="upload-box">
            <input type="file" @input="handleChange">
            <div class="upload-text">
                <PlusOutlined />
                <span>上传图片</span>
            </div>
        </div>
        <div class="upload-demo">
            <div class="list-item" v-for="item in fileList">
                <span>{{ getFileSize(item.size) }}</span>
                <img  :src="item.url" />
                <span v-if="item.compressSize">{{ getFileSize(item.compressSize) }}</span>
                <span v-if="item.compressSize">{{getDecreaseRatio(item.compressSize,item.size)}}</span>
                <DownloadOutlined @click="download(item.url)" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { LoadingOutlined, PlusOutlined,DownloadOutlined } from '@ant-design/icons-vue'
import { tinyPng } from '@/api/tools/tinypng/index'
import {getFileSize,getDecreaseRatio} from '@/assets/utils/index'
import {compressStr} from '@/assets/utils/index'
const fileList = ref([])

const handleChange = (e) => {
    const file = e.target.files[0]
    const formData = new FormData()
    formData.append('qt', 80)
    formData.append('file', file,'1.png')
    let uid = new Date().getTime()
    fileList.value.push({
        uid,
        name: file.name,
        size: file.size,
    })
    tinyPng(
        formData,{
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }
    ).then(res => {
        for (let i = 0; i < fileList.value.length; i++) {
            if (fileList.value[i].uid === uid) {
                fileList.value[i].url = 'data:image/png;base64,'+res.pic
                fileList.value[i].compressSize = res.compressSize
                break
            }
        }
    })
}

const download = (url)=>{
    // a标签下载
    const a = document.createElement('a')
    a.href = url
    a.download = '1.png'
    a.click()
}


console.log(compressStr('ss1234567890ssss1212sss'))
</script>

<style lang="scss" scoped>
    .upload-box{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content:center;
        align-items:center;
        border: 1px dashed #ccc;
        cursor: pointer;
        position: relative;
        border-radius: 5px;
        margin:0 auto;
        input{
            opacity:0;
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .upload-text{
            position: absolute;
            display: flex;
            justify-content:center;
            align-items:center;
            width: 100%;
            height: 100%;
            color: #999;
            font-size: 16px;
            font-weight: bold;
            border-radius: 5px;
            transition: all 0.3s ease;
            pointer-events: none;
            &:hover{
                background-color: #f2f2f2;
            }
        }
}
.list-item{
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    img{
        width: 80px;
        height: 80px;
    }
    span{
        margin:0 12px;
    }
}
</style>